<template>
  <div class="server-label" id="server_label">
    <div id="server_cont" style="padding: 20px 20px 0;">
      <div class="operate-div">
        <div class="left">
          <span @click.stop="add" class="add"><i class="el-icon-plus"></i>{{$t('config.channel.addLabel')}}</span>
          <span @click.stop="refresh" style="padding-right: 10px"><i class="iconfont icon-shuaxin"></i>{{$t('public.refresh')}}</span>
        </div>
        <el-input
          :placeholder="$t('config.channel.inpputWar')"
          class="condition right"
          size="mini"
          v-model.trim="searchContent"
          @keyup.native.enter="handleIconClick"
          >
          <i
            class="el-input__icon el-icon-search"
            slot="suffix"
            @click="handleIconClick">
          </i>
        </el-input>
      </div>
      <first-leve-label ref="tree" v-if="tableLoading" :tableData="tableData" :searchLabelName="searchLabelName" @refreshData = "refreshData"></first-leve-label>
    </div>
  </div>
</template>
<script>
  import firstLeveLabel from '@/components/business-modules/config/channelConfig/base/firstLeveLabel.vue'
  export default {
    name: 'serverLabel',
    data () {
      return {
        tableLoading: true,
        tableData: [],
        searchLabelName: '',
        searchContent: ''
      }
    },
    methods: {
      refreshData () {
        this.refresh()
      },
      saveLabel () {
        this.$refs.tree.handlesaveLabel()
      },
      handleIconClick () {
        console.log(this.tableData)
        this.searchLabelName = this.searchContent
        this.$refs.tree.searchLabelName(this.searchContent)
      },
      add () {
        this.$refs.tree.handleAddOneLabel()
        if (document.getElementById('server_cont').offsetHeight > document.getElementById('server_label').clientHeight) {
          document.getElementById('server_label').scrollTop = (document.getElementById('server_cont').offsetHeight) - (document.getElementById('server_label').clientHeight)
        }
      },
      refresh () {
        this.searchContent = ''
        this.tableData = []
        this.fetchData()
      },
      fetchData () {
        this.tableLoading = false
        this.$store.dispatch('queryServiceQualityLabel', {idle: ''}).then((resp) => {
          console.log(resp)
          if (resp.success) {
            this.handleLabel(resp.labels)
            this.tableLoading = true
          }
        })
      },
      handleLabel (data) {
        this.tableData = []
//        flag 控制展开收起    status 控制显示的是input  还是span
        for (let i = 0; i < data.length; i++) {
          var obj = {
            enable: data[i].enable,
            lastUpdate: data[i].lastUpdate,
            accountId: data[i].accountId,
            name: data[i].name,
            _id: data[i]._id,
            status: false,
            stopSave: false
          }
          this.tableData.push(obj)
        }
      }
    },
    components: {
      firstLeveLabel
    },
    beforeMount () {
    },
    mounted () {
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .server-label
    overflow-y: auto
    height: calc(100vh - 173px)
    .operate-div
      display flex
      align-items center
      height 30px
      padding 10px 10px 5px
      border 1px solid #E7E7EB
      border-bottom none
      .left
        float left
        /*padding-top 5px*/
        .add
          padding-right 10px
          cursor pointer
      .right
        width 190px
        margin-left 20px
        /*float right*/
      .el-icon-plus
        color $c-main
        font-size 14px
        margin-right 2px
      .icon-shuaxin
        color $c-main
        font-size 14px
        margin-right 2px
        cursor pointer
    .pull-right
      float right
</style>




















